<template>
    <n-space>
        <p style="text-align: center; line-height: 30px;">日期</p><n-select v-model:value="selectWeekValue" :options="selectWeekOption" style="width: 200px;" />
        <p style="text-align: center; line-height: 30px;">工作日</p><n-select v-model:value="selectDayValue" :options="selectDayOption" style="width: 200px;" />
        <n-button type="info" secondary strong @click="searchTable">查找</n-button>
    </n-space>
    <br>
    <table>
        <thead>
            <tr>
                <th>实验室</th>
                <th>1-2</th>
                <th>3-5</th>
                <th>6-7</th>
                <th>8-9</th>
                <th>10-12</th>
                <th>13-15</th>
            </tr>
        </thead>
        <tbody>

            <tr v-for=" (itemOfTable, indexOfTable) in table" :key="indexOfTable">
                <td>{{ itemOfTable.labName }}</td>
                <template v-for="(itemOflist, indexOflist) in itemOfTable.list" :key="indexOflist">
                    <td v-if="itemOflist.className != null">
                        教室名称:{{ itemOflist.className }}<br>
                        课程名称:{{ itemOflist.courseName }}<br>
                        教师名称:{{ itemOflist.teacherName }}<br>
                        周数:{{ itemOflist.startWeek }} - {{ itemOflist.endWeek }}<br>
                    </td>
                    <td v-else></td>
                </template>
            </tr>
        </tbody>
    </table>


</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getTimeTableApi } from '@/api/timeTable/timeTable'

const table = ref()

const classRoomlist = ref([])
onMounted(() => {
    getTimeTable()
})

async function getTimeTable() {
    let week = selectWeekValue.value
    let day = selectDayValue.value
    const res = await getTimeTableApi({
        week,
        day
    })


    table.value = res

    console.log(res)
}

const selectWeekValue = ref(1)
const selectDayValue = ref("一")

function createWeek() {
    let list = new Array()
    for (let i = 1; i <= 20; i++) {
        list.push({
            label: i,
            value: i,

        })
    }
    return list
}
const selectWeekOption = ref(createWeek())
const selectDayOption = ref([
    {
        label: "周一",
        value: "一",
    },
    {
        label: '周二',
        value: "二",
    },
    {

        label: '周三',
        value: "三"
    },
    {

        label: '周四',
        value: "四"
    },
    {

        label: '周五',
        value: '五'
    },
])

function searchTable() {
    getTimeTable()
}

</script>


<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
    width: 200px;
    height: 100px
}

th {
    background-color: #f2f2f2;  
}

tr:nth-child(even) {
    background-color: #f9f9f9;  
}

table tr td:nth-child(n+1) {
    height: 60px;
}


</style>